<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { useArticleStore } from '@/common/stores/modules/article';
import { EyeOutlined, BookOutlined, FieldTimeOutlined } from '@ant-design/icons-vue';
import 'markdown-it-vue/dist/markdown-it-vue.css'
import dayjs from 'dayjs';
import UpdateLocale from 'dayjs/plugin/updateLocale';
import 'dayjs/locale/zh-cn'; // 引入中文语言包
dayjs.locale('zh-cn'); // 设置 dayjs 的语言为中文
dayjs.extend(UpdateLocale);

const route = useRoute()
const userstore = useUserStore()
const articleStore = useArticleStore()

// 获取传递过来的文章 ID
const articleId = route.params.id

// 根据文章id 获取文章详情
const article = computed(() => articleStore.articles.find(item => item.id === articleId))

// 增加浏览量
if (article.value) {
  articleStore.increaseViewCount(articleId as string)  // 每次访问增加浏览量
}

</script>


<template>
  <div class="article-details">
    <div v-if="article" class="article-details-content">
      <h1 class="article-details-content-h1">{{ article.title }}</h1>
      <div class="article-details-content-info">
        <span class="article-details-content-info-span">作者：{{ userstore.userInfo?.user
          }}</span>
        <!-- 发表时间 datetime-->
        <span class="article-details-content-info-span">{{ article.publishTime }}</span>
        <div class="article-details-content-info-span">
          <EyeOutlined />
          <span>{{ article.views }}</span>
        </div>
        <div class="article-details-content-info-span">
          <FieldTimeOutlined />
          <span>阅读20分钟</span>
        </div>
        <div>
          <BookOutlined />
          <span>
            专栏:
          </span>
          <span>{{ article.classify }}</span>
        </div>
      </div>
      <v-md-preview :text="article.content" class="article-details-content-essay"></v-md-preview>
    </div>
    <!-- 右侧  -->
    <div class="article-details-recommend">
      <!-- 本周热榜 -->
      <educ-dynamic-hot-list />
      <!-- 热门话题 -->
      <educ-dynamic-hot-topic />
    </div>

    <!-- 点赞 -->
    <div class="article-details-like">
      <educ-suspended-panel />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.article-details {
  display: flex;
  margin: 0 6.25rem;

  &-content {
    width: 70%;
    padding: .9375rem 2.5rem;
    margin: 0 2.5rem;
    background-color: $educ-color-white ;
    border-radius: .3125rem;

    &-h1 {
      font-weight: 700;
      color: black;
    }

    &-info {
      display: flex;
      align-items: center;

      &-span {
        padding-right: 1.5625rem;
        font-size: .75rem;
        color: #8a919f;
      }
    }

    &-essay {
      margin-top: 1.25rem;
    }
  }

  &-recommend {
    width: 30%;
  }
}

@media screen and (width <= 62rem) {
  .article-details-content {
    width: 100%;
    padding: 0 0.5rem;
    margin: 0;


    h1 {
      text-align: center;
    }

    &-info-span {
      display: none;
    }

  }

  .article-details-recommend {
    display: none;
  }
}

@media screen and (width <= 48rem) {
  .article-details {
    margin: 0 auto;

    &-content-info {
      display: none;
    }

    &-like {
      display: none;
    }
  }
}
</style>
